<template>
	<view class="saleorder">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'卖单信息'"></Hearder>
		<!-- #endif -->
		<u-transition :show="show">
			<view class="navTab">
				<view :class="showTab=='shelf'?'active':''" @click="tab('shelf')">已上架</view>
				<view :class="showTab=='collection'?'active':''" @click="tab('collection')">待收款</view>
				<view :class="showTab=='confirm'?'active':''" @click="tab('confirm')">待确认</view>
				<view :class="showTab=='sell'?'active':''" @click="tab('sell')">已售出</view>
			</view>
			<view class="shop-list">
				<view class="shop-every" v-if="loading" v-for="item in 5">
					<view class="order-title">
						<u-skeleton
							rows="1"
							:title="false"
							:loading="loading"
							:rowsWidth="['100%']"
							:rowsHeight="['50rpx']"
							animate
						></u-skeleton>
					</view>
					<view class="shop-con clearfix">
						<u-skeleton
							rows="3"
							:title="false"
							:loading="loading"
							:rowsWidth="['100%', '50%', '30%']"
							:rowsHeight="['50rpx', '50rpx', '50rpx']"
							animate
							avatar
						></u-skeleton>
					</view>
					<view class="changetime">
						<view class="time-every">
							<u-skeleton
								rows="1"
								:title="false"
								:loading="loading"
								:rowsWidth="['100%']"
								:rowsHeight="['50rpx']"
								animate
							></u-skeleton>
						</view>
					</view>
				</view>
				<view class="shop-every" v-if="!loading" v-for="item in list" :key="item.order_id">
					<view class="order-title">
						<view>单号:{{item.order_no}}</view>
						<view class="state">{{item.pay_status}}</view>
					</view>
					<view class="shop-con clearfix" :style="showTab=='shelf'?'border:none':''">
						<u-transition :show="show">
							<image :src="item.image" class="cont_img"></image>
						</u-transition>
						<view class="shop-right">
							<view class="title">{{item.goods_name}}</view>
							<view class="bot-box">
								<view>商品价格：<text>￥{{item.goods_price}}</text></view>
								<view class="zhuanyi">
									<text>卖家</text>
									{{item.sell_member.member_nickName}}({{item.sell_member.member_phone}})
								</view>
								<view class="zhuanyi changecor">
									<text>买家</text>
									{{item.member.member_nickName}}({{item.member.member_phone}})
								</view>
							</view>
						</view>
					</view>
					<view class="changetime" v-if="showTab!='shelf'">
						<view class="time-every">
							<view class="showtime">下单时间：{{item.create_time}}</view>
							<view class="shiji" v-if="showTab=='collection'">实付：￥{{item.pay_price}}</view>
						</view>
						<view class="time-every" style="margin-top: -20rpx;" v-if="showTab=='confirm' || showTab=='sell'">
							<view class="showtime">变更时间：{{item.pay_time}}</view>
							<view class="shiji">实付：￥{{item.pay_price}}</view>
						</view>
					</view>
					<view class="box_btn" v-if="showTab=='confirm' || showTab=='sell'">
						<view class="zfinfo" @click="toPage('lookpay?imgurl='+item.payment_voucher)">支付信息</view>
						<view class="smlsure" v-if="showTab=='confirm'" @click="toPage('report?order_id='+item.order_id)">举报</view>
						<view class="smlsure" v-if="showTab=='confirm' && item.pay_status!='举报中'" @click="paysure(item.order_id)">确认</view>
					</view>
				</view>
			</view>
			<view class="nidata" v-if="list.length==0&&!loading">
				<image src="../../static/images/noimg.png"></image>
			</view>
		
		</u-transition>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				showTab:'shelf',
				show:true,
				loading:true,
				list:[]
			}
		},
		onLoad(options) {
			if(options.showTab){
				this.showTab= options.showTab || this.$route.query.showTab
			}
		},
		onShow() {
			this.getinit()
		},
		methods:{
			getinit(){
				this.request('/order/getList',{dataType:this.showTab,orderType:3}).then(res => {
					if(res.data.code==1){
						this.list = res.data.data.list
					}
					this.loading = false;
				})
			},
			tab(t){
				this.showTab = t
				this.show = true
				this.loading = true
				this.getinit()
			},
			paysure(order_id){
				this.request('/order/getConsignmentCollection',{order_id:order_id}).then(res => {
					if(res.data.code==1){
						this.showTab = 'sell'
						this.getinit()
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.saleorder{
		min-height: 100%;
		background: #F8F8F8;
		.navTab{
			position: fixed;
			top: 160rpx;
			/* #ifdef H5 */
			top: 0;
			/* #endif */
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #fff;
			z-index: 9;
			border-bottom: $uni-border-bottom;
			view{
				position: relative;
				float: left;
				width: 25%;
				height: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #999;
			}
			.active{
				font-weight: 800;
				color: $uni-item-color;
			 }
			.active::after{
			    content: '';
			    position: absolute;
			    bottom: 0;
			    width: 42rpx;
			    height: 4rpx;
			    background-color: $uni-item-color;
			    left: 50%;
			    transform: translateX(-50%);
			}
		}
		.shop-list{
			margin-top: 240rpx;
			/* #ifdef H5 */
			margin-top: 84rpx;
			/* #endif */
			.shop-every{
				background: #fff;
				margin-bottom: 18rpx;
				padding: 0 30rpx;
				.order-title{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 82rpx;
					border-bottom: 1rpx solid #eee;
					view{
						font-size: 28rpx;
						color: #999;
					}
					.state{
						font-size: 26rpx;
						color: $uni-text-color;
					}
				}
				.shop-con{
					padding: 30rpx 0;
					border-bottom: 1rpx solid #eee;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.cont_img{
						float: left;
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
					.shop-right{
						float: left;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: calc(100% - 220rpx);
						height: 200rpx;
						margin-left: 20rpx;
						.title{
							font-size: 28rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.bot-box{
							>view{
								font-size: 26rpx;
								text{
									font-size: 26rpx;
								}
								&:first-of-type{
									text{
										color: $uni-text-color;
									}
								}
							}
							.zhuanyi{
								margin-top: 20rpx;
								text{
									display: inline-block;
									width: 70rpx;
									height: 36rpx;
									background: #E56C35;
									color: #fff;
									text-align: center;
									line-height: 36rpx;
									margin-right: 20rpx;
								}
							}
							.changecor text{
								background: $uni-item-color;
							}
						}
					}
				}
				.changetime{
					.time-every{
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 80rpx;
						.showtime{
							font-size: 24rpx;
							color: #999;
						}
						.shiji{
							font-size: 26rpx;
							color: $uni-text-color;
						}
					}
				}
				.box_btn{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					height: 100rpx;
					border-top: 1rpx solid #eee;
					view{
						font-size: 28rpx;
						text-align: center;
					}
					.zfinfo{
						width: 144rpx;
						height: 56rpx;
						border: 1rpx solid $uni-item-color;
						color: $uni-item-color;
						line-height: 56rpx;
					}
					.smlsure{
						width: 126rpx;
						height: 60rpx;
						color: #fff;
						line-height: 60rpx;
						background: $uni-item-color;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>